import React from 'react';
import style from './player.module.scss'
import Music from './music'
import Progress from './progress'


class Player extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            type: 0
        }
    }
    changeType() {
        this.state.type == 0?(this.setState({
            type: 1
        })):(this.setState({
            type: 0
        }))
    }
    totalPlay(e) {
        let ev = e || window.event
        ev.stopPropagation();
        console.log('123')
    }
    render() {
        return (
            <div className={style['outer'+this.state.type]} onClick={() => {this.changeType()}}>
                <div className={style.inner}>
                    {
                        this.state.type == 0?
                        <Music></Music>:<React.Fragment>
                            <div className={style.control}>
                                <div className={style.left}>
                                    <p className={style.title}>001-4D森林主...</p>
                                    <p className={style.time}>02:30</p>
                                </div>
                                <div className={style.right} onClick={(e) => {this.totalPlay(e)}}>
                                    <Progress radius={"0.97rem"} percent={0.5}></Progress>
                                </div>
                            </div>
                            <div className={style.triangle}>
                            </div>
                        </React.Fragment>
                    }
                </div>
            </div>
        )
    }
}



export default Player;